import { Carousel } from "react-responsive-carousel";
import Head from "next/head";
import { css } from "@emotion/react"
import styled from "@emotion/styled";
import { Box, Heading, Text, Button } from "@chakra-ui/react";
import axios from "axios";
import { baseURL } from "../axiosConfig";
import Link from 'next/link';
const CarouselItem = styled.div`
  position: relative;
  & > div {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    color: #fff;
    padding-top: 180px;
    text-align: left;
    width: 100%;
    height:100%;
    max-width: 1200px;
    & > p {
      margin: 15px 0;
      font-size: 14px;
      width: 450px;
    }
  }
  & > img {
    filter: brightness(50%);
  }
`;

const swiperContainer = css`
 
  /* height:300px;
  position: relative; */
  &> .carousel-root{
  position: relative;;
    height:auto;

    &>.carousel:last-child{
    position: absolute;
    left: 0;
    bottom: 0;
    & > .thumbs-wrapper > .thumbs {
    display: flex;
    justify-content: center;
   
    }
    }
  }
  &> .carousel-root .carousel{
  }
  & > .carousel:last-child {
    background: plum;
    position: absolute;
    left: 0;
    bottom: 0;
    
  }
`;
const h2Style = css`
color: red;
`
export default function Swiper({data}) {
    return <>
        <Head>
            <link rel="stylesheet" href="/css/carousel.min.css" />
        </Head>
        <Box css={swiperContainer}>
            <Carousel

                showArrows={false}
                showIndicators={false}
                showStatus={false}
            >
                {data.map(item=>{
                    return  <CarouselItem key={item.id}> 
                    <img src={item.url} />
                    <Box>
                        <Heading as="h2" size="lg">
                            {item.title}
                        </Heading>
                        <Text>
                        {item.description}
                        </Text>
                        <Button colorScheme="red">
                            <Link href="/detail/[id]" as={`/detail/${item.vid}`}>CHECK DETAIL</Link>
                        </Button>
                    </Box>
                </CarouselItem>
                })}
               
                

            </Carousel>
        </Box>
    </>
}
export function loadSwiper(){
    return axios.get(`${baseURL}/api/swiper`,{baseURL})
}
